<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" ref="buttondiv">
          <table style="width:100%">
              <tr>
                  <td>
                      <table>
                          <tr>
                              <td width="50">生成日期</td>
                              <td width="280">
                                  <el-date-picker v-model="datetime1" type="date" placeholder="开始日期" value-format="yyyy-MM-dd 00:00:00" :clearable="false"></el-date-picker> 至
                                  <el-date-picker v-model="datetime2" type="date" placeholder="结束日期" value-format="yyyy-MM-dd 23:59:59" :clearable="false"></el-date-picker>
                              </td>
                              <td>条形码</td>
                              <td width="120">
                                  <el-input v-model="barcode"></el-input>
                              </td>
                              <td width="50">病历号</td>
                              <td width="120">
                                  <el-input v-model="patno"></el-input>
                              </td>
                              <td width="30">状态</td>
                              <td>
                                  <el-input></el-input>
                              </td>
                          </tr>
                          <tr>
                              <td>回单条码</td>
                              <td>
                                  <el-input v-model="collectbarcode"></el-input>
                              </td>
                              <td>姓名</td>
                              <td width="120">
                                  <el-input v-model="patname"></el-input>
                              </td>
                              <td>病人类型</td>
                              <td>
                                  <rm-ddl-common datatype="seccode" kindno="PT" dataname="病人类型" :appendtobody="true" v-model="pattype" width="200px"></rm-ddl-common>
                              </td>
                          </tr>
                      </table>
                  </td>
              </tr>
              <tr>
                  <td>
                      <table>
                          <tr>
                              <td width="2000px"></td>
                              <td>
                                  <el-button icon="el-icon-search" type="primary" @click="FindData()" v-has="'PINQUERY'">查询</el-button>
                              </td>
                              <td>
                                  <el-button icon="el-icon-delete" @click="Clear()">清除</el-button>
                              </td>
                              <td>
                                  <el-button icon="el-icon-tickets" @click="Submit()">采样确认</el-button>
                              </td>
                              <td>
                                  <el-button icon="el-icon-printer" @click="Print()">补打条码</el-button>
                              </td>
                          </tr>
                      </table>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <div class="middle-center" ref="xTableDiv" style="height:100%;">
              <div style="height:100%">
                  <vxe-table :data="tableData" :loading="loading" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell'}" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                      <vxe-table-column type="selection" width="40" header-align="left"></vxe-table-column>
                      <vxe-table-column :key="item.field" :field="item.field" :title="item.title" :width="item.width" v-for="item in tableColumn"></vxe-table-column>
                  </vxe-table>
              </div>
          </div>
          <div class="middle-right">
              <div ref="xTableDiv1" style="height:100%">
                  <vxe-table :data.sync="tableDataDetail" :select-config="selectConfig" height="auto" :sort-config="{trigger: 'cell'}" :loading="loadingDetail" highlight-current-row highlight-hover-row border fit highlight-hover-column resizable header-align="center" show-header-overflow="tooltip" show-overflow="tooltip" ref="xTable2" size="mini" stripe>
                      <vxe-table-column :key="item.field" :field="item.field" :title="item.title" :width="item.width" v-for="item in tableColumnDetail"></vxe-table-column>
                  </vxe-table>
              </div>

          </div>
      </div>
  </div>
</template>

<script>
// import { parse } from "path";
export default {
  name: "REQ113",
  //以下是还未完成的功能
  //如果是预制条码，则下方列表中多出“预制条码号”字段，紧靠在现有条码号和采样选择这2列的后方，可以编辑
  //预制条码扫描时，和门诊采血逻辑相同，要校验条码号是否被使用过，校验类别是否正确（条码前缀或后缀）
  data() {
      return {
          datetime1: "",
          datetime2: "",
          patname: "",
          patno: "",
          barcode: "",
          collectbarcode: "",
          pattype: "",

          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true
          },
          keyLocalConfig: {
              isArrow: true
          },
          selectConfig: { tigger: "row" },
          loading: false,
          loadingDetail: false,
          tableData: [],
          tableDataAll: [],
          tableDataDetail: [],
          tableColumn: [],
          tableColumnDetail: [],

          CancelVisible: false,
          reqmaster: {},
          reqitem: "",
          // patno: "",
          UpPatno: "",
          noArray: [],
          options: [],
      };
  },
  created() {
      this.InitPageData();
  },
  mounted() {},
  updated() {},
  methods: {
      currentChangeEvent({ row }) {
          this.reqmaster = row;
          this.FindDetail();
      },
      InitPageData() {
          var day1 = new Date();
          day1.setTime(day1.getTime());
          var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() + " 23:59:59";
          var day2 = new Date();
          day2.setTime(day2.getTime() - 24 * 60 * 60 * 1000 * 7);
          var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + " 00:00:00";
          this.datetime1 = s2;
          this.datetime2 = s1;
          this.initData();
          this.FindData();
          this.FindDetail();
      },
      initData() {
          this.$tool
              .request({
                  url: "REQ/REQ1/REQ113",
                  method: "post",
                  data: {
                      action: "initData",
                  },
              })
              .then((res) => {
                  this.options = res;
              })
              .catch((e) => {
                  console.log("error", e);
              });
      },
      FindData() {
          this.loading = true;
          this.$tool
              .request({
                  url: "REQ/REQ1/REQ113",
                  method: "post",
                  data: {
                      action: "query",
                      barcode: this.barcode,
                      begindate: this.datetime1,
                      enddate: this.datetime2,
                      patno: this.patno,
                      patname: this.patname,
                      collectbarcode: this.collectbarcode,
                      pattype: this.pattype
                  }
              })
              .then(res => {
                  this.tableColumn = res.Cols;
                  this.tableData = res.Data1;
                  this.loading = false;
              });
      },
      FindDetail() {
          this.loadingDetail = true;
          this.$tool
              .request({
                  url: "REQ/REQ1/REQ113",
                  method: "post",
                  data: {
                      action: "querydetail",
                      barcode: this.reqmaster.barcode
                  }
              })
              .then(res => {
                  this.tableColumnDetail = res.Cols;
                  this.tableDataDetail = res.Data;
                  this.loadingDetail = false;
              });
      },
      Clear() {
          this.tableData = [];
          this.tableDataDetail = [];
          this.barcode = "";
          this.datetime1 = "";
          this.datetime2 = "";
          this.patname = "";
          this.patno = "";
          this.barcode = "";
          this.collectbarcode = "";
      },
      Submit() {
          var record = this.$refs.xTable.getSelectRecords();
          this.noArray = [];
          for (let i = 0, len = record.length; i < len; i++) {
              if ((record[i].req_stat >= 4) & (record[i].req_stat < 8)) {
                  this.noArray.push(record[i].barcode);
              }
          }
          if (this.noArray.length > 0) {
              this.$confirm(this.noArray[0] + "检验科已接收该标本，不能重复采样 ", "提示", {
                  showCancelButton: false,
                  confirmButtonText: "确定",
                  type: "warning"
              });
          } else {
              this.$tool
                  .request({
                      url: "REQ/REQ1/REQ113",
                      method: "post",
                      data: {
                          action: "submitall",
                          saveinfo: record,
                          oldinfo: record
                      }
                  })
                  .then(res => {
                      if (res.errcode == 1) {
                          this.$message({
                              message: "采样确认成功",
                              type: "success"
                          });
                          this.InitPageData();
                      } else {
                          this.$message.error("采样确认失败:" + res.errmsg);
                      }
                  });
          }
      },
      Print(){
          var record = this.$refs.xTable.getSelectRecords();
          if(!!record && record.length > 0){
              //打印条码
              let barcodestr='';
              record.forEach(element => {
                  barcodestr += element.barcode + ',';
              });
              if(barcodestr.endsWith(',')) {
                  barcodestr = barcodestr.substring(0, barcodestr.length - 1);
              }
              if (barcodestr != null && barcodestr != "") {
                  if (this.options.barcodestyle != "") {
                      this.$pub.printbarcode(this, barcodestr, "1", this.options.barcodestyle, this.options.cxbarcodeprinter, '1');
                  } else {
                      this.$alert("没有设置条码的打印样式", "错误", {
                          confirmButtonText: "确定",
                      });
                  }
              }
          }
          else {
              this.$message.error("请先勾选条码！");
          }
      }
  }
};
</script>

<style scoped>
::v-deep .vxe-input--wrapper .vxe-input {
  height: auto;
  width: 200px;
  border-radius: 0px;
}
::v-deep .el-button--default.btn-custom-cancel {
  float: right !important;
  margin-left: 10px;
}

.pagetop {
  left: 0;
  right: 0;
  height: 113px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 118px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  right: 305px;
  left: 0;
}

.middle-right {
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 300px;
  right: 0px;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .el-checkbox__inner::after {
  border: 2px solid #000000 !important;
  box-sizing: content-box;
  content: "";
  border-left: 0 !important;
  border-top: 0 !important;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000000;
  cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
  background-color: #ffffff !important;
}
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width:130px
}
</style>
